<template>
  <div>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/ssss' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>数据统计</el-breadcrumb-item>
          <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <div
          class="chart-box"
          ref="chartBox"
          style="height: 500px; width: 750px"
        ></div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { huoQuReports } from '@/api/reports'
export default {
  name: 'ReportsA',
  data () {
    return {
      shiJian: [],
      weiZhi: [],
      seriesList: [],
      yAxisList: []
    }
  },
  created () {
    this.fn()
  },
  mounted () {

  },
  computed: {
  },
  methods: {
    async fn () {
      const res = await huoQuReports()
      // console.log(res);
      this.weiZhi = res.data.legend.data
      this.shiJian = res.data.xAxis[0].data
      this.seriesList = res.data.series
      this.yAxisList = res.data.yAxis
      console.log(this.weiZhi, 11111);
      console.log(this.shiJian, 2222);
      console.log(this.seriesList, 3333);
      console.log(this.yAxisList, 4444);
      const myChart = echarts.init(this.$refs.chartBox)
      myChart.setOption({
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: this.weiZhi
        },
        color: ["#d5726f", "#6e7d88", "#91bdc3", "#e1a894", "#b2d8c7",],
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.shiJian
          }
        ],
        yAxis: this.yAxisList,
        series: this.seriesList
      })
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
